<template>
    <div class="infoTitle">被保证信息</div>
    <div class="infoArea">
        <div class="infoItem">
            <div>借款人</div>
            <div class="itemValue">张山水</div>
        </div>
        <div class="infoItem">
            <div>借款人</div>
            <div class="itemValue">张山水</div>
        </div>
        <div class="infoItem">
            <div>借款人身份证</div>
            <div class="itemValue">2104211999888888888</div>
        </div>
        <div class="infoItem">
            <div>借款人手机</div>
            <div class="itemValue">18841388888</div>
        </div>
        <div class="infoItem">
            <div>贷款方式</div>
            <div class="itemValue">保证</div>
        </div>
        <div class="infoItem">
            <div>贷款金额</div>
            <div class="itemValue">185,000.00元</div>
        </div>
        <div class="infoItem">
            <div>授信期限</div>
            <div class="itemValue">36个月</div>
        </div>
        <div class="infoItem">
            <div>年利率</div>
            <div class="itemValue">5.02%</div>
        </div>
    </div>
    <div class="infoTitle">签署信息</div>
    <div class="infoArea">
        <div class="infoItem">
            <div>贷款角色</div>
            <div class="itemValue">贷款保证人</div>
        </div>
        <div class="infoItem">
            <div>姓名</div>
            <div class="itemValue">张山水</div>
        </div>
        <div class="infoItem">
            <div>身份证号码</div>
            <div class="itemValue">21042119991188888888</div>
        </div>
        <div class="infoItem">
            <div>手机号</div>
            <div class="itemValue">188888888888</div>
        </div>
        <div class="infoItem">
            <div>邮箱</div>
            <div class="itemValue">8797793552qq.com</div>
        </div>
        <div class="infoItem">
            <div>送达地址</div>
            <div class="itemValue">合肥市蜀山区红心花园1#201室</div>
        </div>
    </div>
    <div class="nextBtn">下一步</div>
</template>

<script setup>
import {ref,reactive} from 'vue'

</script>

<style scoped lang='scss'>
.nextBtn{
    width: 590rpx;
    height: 88rpx;
    margin: 0 80rpx;
    margin-top: 38rpx;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    background-image: linear-gradient(to right,#619DF1,#4478C1);
}
.infoTitle{
    padding-top: 20rpx;
    padding-left: 30rpx;
    padding-bottom: 6rpx;
    height: 33rpx;
    line-height: 33rpx;
}
.infoArea{
    padding: 10rpx 40rpx;
    background-color: #fff;
    .infoItem{
        height: 88rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #EEEEEE;
        .itemValue{
            color: #999;
        }
    }
}
</style>
<style>
page{
    background-color: #f8f8f8;
}
</style>